<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 方式二 -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <!-- 或者 方式三  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <style>
        .parent {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-column-gap: 0px;
            grid-row-gap: 0px;
        }
        .div1 { grid-area: 1 / 1 / 2 / 2; }
        .div2 { grid-area: 1 / 2 / 2 / 3; }
        .div3 { grid-area: 2 / 1 / 3 / 2; }
        .div4 { grid-area: 2 / 2 / 3 / 3; }
    </style>

</head>
<body>
<div class="parent">
    <div id="chart1" class="div1" style="width: 500px;height:500px;"></div>
    <div id="chart2" class="div2" style="width: 500px;height:500px;"></div>
    <div id="chart3" class="div3" style="width: 500px;height:500px;"></div>
    <div id="chart4" class="div4" style="width: 500px;height:500px;"></div>
</div>

<script>
    let chart1 = echarts.init(document.getElementById('chart1'));
    let chart2 = echarts.init(document.getElementById('chart2'));
    let chart3 = echarts.init(document.getElementById('chart3'));
    let chart4 = echarts.init(document.getElementById('chart4'));



    $.get("/data/all",function(data,status){

        let xData = data.map(item=>item.year);
        let y1 = data.map(item=>item.yuan);
        let y2 = data.map(item=>item.wai);
        let y3 = data.map(item=>item.sub);
        let y4 = data.map(item=>item.dian);

        let option1 = {
            title: {
                text: '计算结果',
            },
            xAxis: {
                name:'日期',  //X轴标题
                data: xData,
            },
            yAxis: {
                name:'原煤', //Y轴标题
                type: 'value'
            },
            series: [{
                type: 'line',
                smooth: true,
                data: y1,
            }]
        };
        let option2 = {
            title: {
                text: '计算结果',
            },
            xAxis: {
                name:'日期',  //X轴标题
                data: xData,
            },
            yAxis: {
                name:'外购焦炭', //Y轴标题
            },
            series: [{
                name: '外购焦炭',
                type: 'line',
                smooth: true,
                data: y2,
            }]
        };
        let option3 = {
            title: {
                text: '计算结果',
            },
            xAxis: {
                name:'日期',  //X轴标题
                data: xData,
            },
            yAxis: {
                name:'碳输入-输出', //Y轴标题
                type: 'value'
            },
            series: [{
                name: '碳输入-输出',
                type: 'line',
                smooth: true,
                data: y3,
            }]
        };
        let option4 = {
            title: {
                text: '计算结果',
            },
            xAxis: {
                name:'日期',  //X轴标题
                data: xData,
            },
            yAxis: {
                name:'电力', //Y轴标题
                type: 'value'
            },
            series: [{
                type: 'line',
                smooth: true,
                data: y4,
            }]
        };
        chart1.setOption(option1);
        chart2.setOption(option2);
        chart3.setOption(option3);
        chart4.setOption(option4);
    });










</script>





</body>
</html>